<template>
  <view>
    <!-- 模拟搜索框组件 -->
    <view class="search-box">
      <search @faOpen="open"></search>
    </view>

    <!-- 职业标签模块 -->
    <view class="job-area">
      <view class="all-jobs">
        <view class="job">月嫂</view>
        <view class="job">保姆</view>
        <view class="job">育婴师</view>
        <view class="job">产康师</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job">月嫂/月嫂</view>
        <view class="job active">全部职业</view>
      </view>
    </view>

    <!-- 公司模块 -->
    <view class="company">
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzt-tools.com%2F20201220%2F9e407e7e7f6123f17c07a2e49f1c83cd.jpg&refer=http%3A%2F%2Fimg.yzt-tools.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668824993&t=79cbd51a844e6b7b3f81d0132d538219"
            mode="aspectFill" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzt-tools.com%2F20201220%2F9e407e7e7f6123f17c07a2e49f1c83cd.jpg&refer=http%3A%2F%2Fimg.yzt-tools.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668824993&t=79cbd51a844e6b7b3f81d0132d538219"
            mode="aspectFill" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzt-tools.com%2F20201220%2F9e407e7e7f6123f17c07a2e49f1c83cd.jpg&refer=http%3A%2F%2Fimg.yzt-tools.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668824993&t=79cbd51a844e6b7b3f81d0132d538219"
            mode="aspectFill" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzt-tools.com%2F20201220%2F9e407e7e7f6123f17c07a2e49f1c83cd.jpg&refer=http%3A%2F%2Fimg.yzt-tools.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668824993&t=79cbd51a844e6b7b3f81d0132d538219"
            mode="aspectFill" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
    </view>

    <!-- 弹层组件 -->
    <pop-up ref="popupFa" :infoList="infoList"></pop-up>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        infoList: [] // 接收弹层的数据
      };
    },
    onLoad() {
      this.getInfo()
    },
    methods: {
      // 封装请求组件
      async getInfo() {
        const {
          data: res
        } = await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/matching')
        this.infoList = res.data.message
      },

      // 打开弹窗
      open() {
        // 当有数据之后再执行打开弹层
        if (this.infoList.length > 0) {
          this.$refs.popupFa.open()
        }
      }
    }
  }
</script>

<style lang="scss">
  // 头部下拉框修改样式
  .uni-stat-box {
    .uni-select {
      border: 1px solid #3f51b5;
      border-bottom: solid 1px #3f51b5;

      // 占位符的颜色
      .uni-select__input-text {
        color: #fff;
      }

      // 下拉框的按钮
      .uni-icons {
        color: #fff !important;
      }
    }
  }

  // ------虚拟搜索框
  .search-box {
    position: sticky;
    top: 0;
    z-index: 99;
  }

  // ------职业标签模块
  .job-area {
    position: fixed;

    .all-jobs {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;

      .job {
        height: 40rpx;
        border: 1px solid #979191;
        color: #979191;
        line-height: 40rpx;
        text-align: center;
        border-radius: 28rpx;
        font-size: 24rpx;
        padding: 0 40rpx;
        margin: 16rpx 16rpx 6rpx 16rpx;
      }

      .active {
        border: 1px solid #3f51b5;
        color: #3f51b5;
      }
    }
  }



  // 公司信息
  .company {
    margin-top: 220rpx;
    padding: 10rpx;
    background-color: #fff;

    .company-item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 10rpx;
      border-bottom: 1rpx solid #f2f0f0;

      .company-left-item {
        font-size: 24rpx;

        img {
          height: 172rpx;
          width: 160rpx;
          background-color: pink;
        }
      }

      .company-right-item {
        height: 209rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 28rpx;

        }

        .item-jobs {
          display: flex;
          background-color: #fff;

          .job {
            height: 40rpx;
            border: 1px solid #979191;
            color: #979191;
            line-height: 40rpx;
            text-align: center;
            border-radius: 28rpx;
            font-size: 20rpx;
            padding: 0 20rpx;
            margin: 10rpx;
          }

          .active {
            border: 1px solid #3f51b5;
            color: #3f51b5;
          }

        }

        .wenzi {
          font-size: 24rpx;
          color: #979191;
        }
      }

    }
  }
</style>
